vue中计算属性(computed)和监听属性(watch)的异步操作 |
您所在的位置：网站首页 › vue watch监听computed › vue中计算属性(computed)和监听属性(watch)的异步操作 |
vue中计算属性(computed)和监听属性(watch)的异步操作
|
计算属性能(computed)完成的功能监听属性都能完成 比如计算两个数的和 总和{{adden}} 输入的值1 输入的值2 var vm = new Vue({ el: '#app', data: { a:"", b:"", adden:"", }, //监听属性实现 watch:{ a(val){ this.adden=this.b*1+val*1 }, b(val){ this.adden=this.a*1+val*1 } }, // 计算属性实现 // computed: { // adden(){ // console.log(this); // return this.a*1+this.b*1 // } // }, })计算属性(computed)不能进行异步操作 因为计算属性(computed)是通过return返回值传递参数 异步操作的时候return是没有意义的 以定时器(setTimeout)举例
很明显58行打印的并不是setTimeout中return的值,而是对应的setTimtout()的 ID 详情可以看 setTimeout（） - 简书 (jianshu.com) 所以vue中的计算属性(computed)不能使用异步函数 如果想让两个数的和隔一秒在出现 计算函数是不行的 总和{{adden}} 输入的值1 输入的值2 var vm = new Vue({ el: '#app', data: { a:"", b:"", // adden:"", }, //监听属性 // watch:{ // a(val){ // this.adden=this.b*1+val*1 // }, // b(val){ // this.adden=this.a*1+val*1 // } // }, computed: { adden(){ console.log(this); return setTimeout(()=>{ console.log(this.a); return this.a*1 + this.b*1 },1000) } }, })此时adden返回的是setTimeout的Id
监听属性(watch) 当被监听的属性变化时会自动调用预定义函数 watch可以进行异步操作 总和{{adden}} 输入的值1 输入的值2 var vm = new Vue({ el: '#app', data: { a:"", b:"", adden:0, }, //监听属性 watch:{ a(val){ setTimeout(()=>{ this.adden=this.b*1+val*1 },1000) }, b(val){ this.adden=this.a*1+val*1 } }, // computed: { // adden(){ // console.log(this); // return setTimeout(()=>{ // console.log(this.a); // return this.a*1 + this.b*1 // },1000) // } // }, })以定时器为例 所有不被vue管理的函数(定时器的回调,ajax的回调函数等)最好写成箭头函数这样this的指向才是vm或者组件实例对象,被vue管理的函数最好不要使用箭头函数,this会指向为被定义(箭头函数绑定的是父级作用域的上下文) 深入了解可以看 【ES6】箭头函数this指向问题【看这一篇就够啦！】_Milk595的博客-CSDN博客_箭头函数this指向 在methods中也可以进行异步操作 但是 methods中配置的都是函数 需要自己调用 当你需要监听数据的时候就需要 computed 和 watch 当需要进行异步操作还要监听数据的时候就可以使用watch 具体的使用情况可以看 计算属性（computed）和监听器（watch）的区别_长沙黑马程序员前端与移动开发学科的博客-CSDN博客_监听属性和计算属性的区别 |
https://www.jianshu.com/p/9b389c99d97b异步函数的返回值都不是用return返回的
【本文地址】
今日新闻 |
推荐新闻 |